<template>
  <div>
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="order-details-page">
      <div class="order-details-state">
        <van-steps :active="active">
          <van-step>已创建</van-step>
          <van-step>已支付</van-step>
          <van-step>配送中</van-step>
          <van-step>已完成</van-step>
        </van-steps>
      </div>
      <div class="order-details-goods">
        商品
        <div v-for="(item, i) in orderToDetail" :key="i">
          <DetailsGoods :goodsInfo="item" />
        </div>
        <div class="sum">总价: ￥{{ orderInfo.price }}</div>
      </div>
      <div class="order-details-user">
        <div class="order-details-user-name">
          昵称: {{ orderInfo.customer_name }}
        </div>
        <div class="order-details-user-room">
          房号: {{ orderInfo.address_detail }}
        </div>
        <div class="order-details-user-tele">手机号: {{ orderInfo.phone }}</div>
      </div>
      <div class="order-details-order">
        <div class="order-details-order-number">订单号: {{ orderInfo.id }}</div>
        <div class="order-details-order-mode">支付方式: 到付</div>
        <div class="order-details-order-time">
          下单时间: {{ new Date(orderInfo.submit_datetime).toLocaleString() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailsGoods from "@/components/DetailsGoods.vue";
import axios from "axios";

export default {
  components: {
    DetailsGoods,
  },
  data() {
    return {
      orderInfo: {},
      active: 0,
      orderExtend: [],
      orderToDetail: [],
    };
  },
  methods: {
    tranState(state) {
      const map = {
        c: 0,
        p: 1,
        d: 2,
        f: 3,
      };

      return map[state];
    },
  },
  mounted() {
    const orderId = this.$route.query.orderId;
    this.active = this.tranState(this.orderInfo.state);
    axios
      .get("/api/order-extend/", { params: { order: orderId } })
      .then((resp) => {
        this.orderExtend = resp.data.results;
        this.orderToDetail = [];
        this.orderExtend.filter((item) => {
          this.orderToDetail.push({
            img: item.product.image,
            name: item.product.name,
            price: item.product.price,
            num: item.count,
          });
        });
      });

    axios.get("/api/order/").then((resp) => {
      const orderList = resp.data.results;
      orderList.forEach((order) => {
        if ((order.id = orderId)) {
          this.orderInfo = order;
        }
      });
    });
  },
};
</script>

<style scoped>
.order-details-page {
  padding: 5px 0;
  text-align: left;
}

.order-details-state,
.order-details-goods,
.order-details-user,
.order-details-order {
  margin: 8px 4px;
  padding: 8px;

  border-radius: 8px;
  background-color: #fff;
  transition: all 0.1s ease-in;
}

.sum {
  text-align: right;
  color: rgb(228, 0, 0);
  font-weight: bolder;
  font-size: 1.6em;
}
</style>
